<template>
        <div>

        <el-container>
            <!-- 头部 -->
            <el-header>
                糖尿病友之家后台管理系统
            </el-header>

            <el-container>
                <!-- 导航栏 -->
                <el-aside>

                    <el-menu
                            router
                            :default-active=$route.path
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"

                            text-color="rgb(53, 161, 202)"
                            active-text-color="rgb(28, 237, 227)">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-reading"></i>
                                <span>文章管理</span>
                            </template>
                            <el-menu-item index="/addarticle">文章发布</el-menu-item>
                            <el-menu-item index="/listarticle">文章编辑</el-menu-item>
                            <el-submenu index="1-3">
                            <template slot="title">文章分类</template>
                            <el-menu-item index="/addaritype">分类添加</el-menu-item>
                            <el-menu-item index="/listaritype">分类删改</el-menu-item>
                            </el-submenu>
                            <el-submenu index="1-4">
                                <template slot="title">文章标签</template>
                                <el-menu-item index="/addaritag">标签添加</el-menu-item>
                                <el-menu-item index="/listaritag">标签删改</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-user"></i>
                                <span>用户管理</span>
                            </template>
                            <el-menu-item index="/listuser">用户信息管理</el-menu-item>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-s-comment"></i>
                                <span>咨询管理</span>
                            </template>
                            <el-menu-item index="/listQ">问题管理</el-menu-item>
                            <el-menu-item index="/listA">回答管理</el-menu-item>
                        </el-submenu>
                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-turn-off"></i>
                                <span>过审管理</span>
                            </template>
                            <el-menu-item index="/pastQ">问题过审</el-menu-item>
                            <el-menu-item index="/pastPost">帖子过审</el-menu-item>
                        </el-submenu>
                        <el-submenu index="5">
                            <template slot="title">
                                <i class="el-icon-chat-round"></i>
                                <span>论坛管理</span>
                            </template>
                            <el-menu-item index="/listPost">帖子管理</el-menu-item>
                            <el-menu-item index="/listComment">评论管理</el-menu-item>
                        </el-submenu>

                    </el-menu>
                </el-aside>

                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
        </div>
</template>

<script>
    export default {
        name: "manage"
    }
</script>

<style scoped>
    .el-header {
        background-image: linear-gradient(to right, rgb(54, 160, 202) , rgb(27, 238, 227));
        color: rgb(240, 243, 246);
        text-align: left;
        line-height: 80px;
        height: 70px !important;
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif !important;
        font-size: 2.0em;
        border-radius: 5px 10px 10px 0px !important;
        border: 1px 5px solid rgb(191, 238, 236) !important;

    }


    .el-aside {
        background-image: linear-gradient(to right,  rgba(27, 238, 227,0.5),rgba(54, 160, 202,0.5));
        color: rgb(217, 243, 246);
        text-align: center;
        line-height: 200px;
        width: 210px !important;
        height: 600px !important;
    }

    .el-main {
        background-color: rgb(255, 255, 255);
        color: #333;
        text-align: center;
    }
    .el-menu{
        background-color: rgb(210, 232, 238);
        font-weight: 600 !important;
    }

</style>